<template>
	<div class="customer">

		<el-row style="margin-top: 15px;padding: 20px 0;">
			<el-col :span="24">

				<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
					<!-- <el-button type="primary" @click="edit(0)">+新增</el-button> -->
					<el-form-item label="商品名称:">
						<el-input v-model="formInline.goodName" style="width: 150px;" :maxlength="50"></el-input>
					</el-form-item>
					<el-form-item label="按分类：">
						<el-select v-model="formInline.goodOneCate" style="width: 150px;" @change="selectSort2()" placeholder="一级分类">
							<el-option label="全部" value=""></el-option>
							<el-option :label="item.cateName" :value="item.cateId" v-for="item in sortList"></el-option>
						</el-select>
						<el-select v-model="formInline.goodTwoCate" style="width: 150px;" placeholder="二级分类" v-if="formInline.goodOneCate">
							<el-option label="全部" value=""></el-option>
							<el-option :label="item.cateName" :value="item.cateId" v-for="item in secondList"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="是否启用优惠价：" label-width="130px">
						<el-select v-model="formInline.goodIsDiscount" style="width: 120px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="已启用" value="1"></el-option>
							<el-option label="未启用" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-button type="primary" @click="fetchData(1)">查询</el-button>

				</el-form>
			</el-col>
		</el-row>

		<el-table :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" stripe @sort-change='order'
		 style="width: 100%">
			<el-table-column label=" " width="40">
				<template scope="scope">
					<el-checkbox-group v-model="checked" :max="100" @change="handleCheckedCitiesChange" v-if="scope.row.goodState!=6">
						<el-checkbox :label="scope.row.goodId"></el-checkbox>
					</el-checkbox-group>
				</template>
			</el-table-column>
			<el-table-column type="index" label="序号" width="70">
			</el-table-column>
			<el-table-column width="215" label="商品">
				<template scope="scope">
					<div style="display: inline-block;">
						<img class="banner" :src="scope.row.goodCover" style="width:55px;">
					</div>
					<div style="display: inline-block;width: 120px;vertical-align: middle;padding: 10px;">{{scope.row.goodName}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="DIS_PRICE" label="分类">
				<template scope="scope">
					<span>{{ scope.row.goodOneCateName }} - {{ scope.row.goodTwoCateName }}</span>
				</template>
			</el-table-column>
			<!--             <el-table-column
                    label="排序值"
                    prop="room_Sort"
                    width="115"
                    sortable='custom'>
                    <template scope="scope">
                        <el-input  v-model="scope.row.roomSort" style="width:50px;" @blur="editOrder(scope.row,$event)" @focus="setOldProbability(scope.row)"></el-input>
                    </template>
            </el-table-column> -->
			<el-table-column prop="good_Price" sortable='custom' label="起售价（元）" width="150">
				<template scope="scope">
					<span>{{ scope.row.goodPrice }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="T1.good_Discount_Price" label="优惠价（元）">
				<template scope="scope">
					<span v-if="scope.row.goodIsDiscount==1">{{ scope.row.goodDiscountPrice }}</span>
					<span v-else>未启用</span>
				</template>
			</el-table-column>
			<el-table-column prop="good_Ratio" label="补贴比例">
				<template scope="scope">
					<span>{{ scope.row.goodRatio*100 }}%</span>
				</template>
			</el-table-column>
			<el-table-column prop="sales" label="销量">
			</el-table-column>
			<el-table-column prop="stock" label="库存">
			</el-table-column>
			<el-table-column prop="cre_Time" sortable='custom' label="上架时间" min-width="150">
				<template scope="scope">
					<span>{{scope.row.creTime}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template scope="scope">
					<el-button type="primary" size="small" @click="edit(scope.row.goodId)">编辑</el-button>
					<el-button type="success" size="small" @click="putAway(scope.row.goodId,scope.row.goodState)">上架</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="paginate">
			<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
			 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
			</el-pagination>
		</div>
		<div style="margin-top:20px;margin-left:20px;">
			<el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="margin-right: 40px;" :indeterminate="isIndeterminate">全选
			</el-checkbox>
			<el-button type="primary" @click="putAway()" :loading="loading">上架</el-button>
		</div>
	</div>

</template>
<style>

</style>
<script>
	export default {
		data() {
			return {
				title: '用户列表',
				table_loading: false,
				formInline: {
					goodsName: '',
					goodOneCate: '',
					goodTwoCate: '',
					goodState: '',
					storeId: '',
					pageNum: 1,
					pageSize: 10,
					sort: 'T1.CRE_TIME',
					desc: 'DESC',
					flag: 1,
					goodIsDiscount: ''
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				formLabelWidth: '120px',
				gridData: [],
				checked: [],
				checkAll: false,
				isIndeterminate: true,
				arr: [],
				sortList: [],
				secondList: [],
				loading: false,
				flag2: '',
				showSort: false,
				storeId: ''

			}
		},
		created() {
			this.fetchData(this.pageInfo.pageNum);
			this.selectSort()
		},

		methods: {
			fetchData(page = 1) {
				this.table_loading = true;
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				console.log(this.formInline, '仓库中商品参数')
				this.dataApi.ajax('selectPageStoreGood', this.formInline, res => {
					this.table_loading = false;
					if (res.responseType === 'S') {
						this.pageInfo = res
						this.gridData = []
						for (var i = res.dtos.length - 1; i >= 0; i--) {
							if (res.dtos[i].goodState != 6) {
								this.gridData.push(res.dtos[i])
							}
						}
						this.arr = []
						for (var i = this.gridData.length - 1; i >= 0; i--) {
							this.arr.push(this.gridData[i].goodId)

						}
						if (this.checked.length == this.arr.length) {
							this.checkAll = true
						} else {
							this.checkAll = false;
						}
					}
				});
			},
			fetchList() {
				this.dataApi.ajax('MallGoodClassifyControl/selectListOne', null, res => {
					if (res.responseType === 0) {
						this.sortList = res.goodsClassifyPojos
					}
				});
			},
			changeType(e) {
				this.formInline.supplierName = ''
				this.formInline.goodsName = ''
			},
			handleCurrentChange(val) {
				this.fetchData(val)
			},
			edit(id) {
				this.$router.push('/mall/new_addgood/' + id)
			},
			handleCheckedCitiesChange(value) {
				let arr = []
				for (var i = this.arr.length - 1; i >= 0; i--) {
					for (var j = this.checked.length - 1; j >= 0; j--) {
						if (arr.indexOf(this.checked[j] === -1) && this.arr[i] === this.checked[j]) {
							arr.push(this.checked[j])
						}
					}
				}
				let checkedCount = arr.length;
				this.checkAll = checkedCount === this.arr.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.arr.length;
			},
			handleCheckAllChange(event) {
				console.log(this.checked)
				if (event.target.checked == false) {
					for (var i = this.arr.length - 1; i >= 0; i--) {
						for (var j = this.checked.length - 1; j >= 0; j--) {
							if (this.arr.indexOf(this.checked[j]) !== -1) {
								this.checked.splice(j, 1)
							}
						}
					}

				} else {
					this.isIndeterminate = false;
					for (var i = this.gridData.length - 1; i >= 0; i--) {
						if (this.checked.indexOf(this.arr[i]) === -1) {
							this.checked.push(this.arr[i])

						}

					}
				}


			},
			putAway(id, state) {
				if (state == 6) {
					this.showMsg('此商品包含敏感信息,官方平台已下架,请联系平台客服,进行上架操作', 'warning')
					return
				}
				this.$confirm('确定上架?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var list = []
					if (id) {
						list.push(id)
					} else {
						if (this.checked.length == 0) {
							this.showMsg('请选择要上架的商品', 'warning')
							return
						}
						list = this.checked
					}
					this.loading = true
					this.dataApi.ajax('batchUpdateGoodStat', {
						goodIdList: list
					}, res => {
						if (res.responseType === 'S') {
							this.loading = false
							this.showMsg('上架成功')
							this.fetchData(this.pageInfo.pageNum)
						}
					});
				}).catch(() => {

				});
			},
			selectSort() {
				this.dataApi.ajax('selectGoodCate', {
					cateState: '1'
				}, res => {
					//console.log(res)
					if (res.responseType === 'S') {
						this.sortList = res.dtos
					}
				});

			},
			selectSort2() {
				this.formInline.goodTwoCate = ''
				this.dataApi.ajax('selectGoodCate', {
					cateId: this.formInline.goodOneCate,
					cateState: '1'
				}, res => {
					//console.log(res)
					if (res.responseType === 'S') {
						this.secondList = res.dtos
					}
				});

			},
			setOldProbability(item) {
				item.OldProbability = item.roomSort
			},
			editOrder(item) {
				if (Math.floor(item.roomSort) <= 0) {
					item.roomSort = item.OldProbability || 0;
					return false;
				}
				if (item.OldProbability == item.roomSort) return false;
				if (!isNumber(item.roomSort)) {
					this.showMsg('只能输入数字', 'warning')
					item.roomSort = item.OldProbability
					return false;
				}
				this.dataApi.ajax('editStoreGood', {
					storeGoodDto: {
						goodId: item.goodId,
						roomSort: item.roomSort
					}
				}, res => {
					if (res.responseType === 'S') {
						this.showMsg('修改成功')
						this.fetchData(this.pageInfo.pageNum)
					}
				});
			},
			handleDelete(id) {
				this.$confirm('确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dataApi.ajax('MallGoodListControl/deleteGoodsList', {
						goodslistId: id
					}, res => {
						if (res.responseType === 0) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.fetchData(this.pageInfo.pageNo)
						}
					});
				}).catch(() => {

				});
			},
			order(column) {
				if (!column.order) {
					return;
				}
				if (column.order == 'ascending') {
					this.formInline.desc = 'ASC'
				} else {
					this.formInline.desc = 'DESC'
				}
				this.formInline.sort = column.prop.toUpperCase()
				this.fetchData(this.pageInfo.pageNum)
			}

		}
	}
</script>
